<template>
  <div>
    <h1>toRaw</h1>
    <h1>{{ obj.age }}</h1>
    <input type="text" v-model="obj.age">
    <h1>{{ objToRaw.age }}</h1>
    <input type="text" v-model="objToRaw.age">
    <h1>{{ obj }}</h1>
    <button @click="objAddArr">触发添加arrs方法</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, markRaw, reactive, toRaw } from 'vue'

export default defineComponent({
  setup() {
    const obj = reactive<any>({
      name: 'tom',
      age: 10,
    });
    console.log(obj);
    const objToRaw = toRaw(obj);
    console.log(objToRaw);


    function objAddArr() {
      const arrs = [1, 2];
      obj.arrs = markRaw(arrs);
      setTimeout(() => {
        obj.arrs[0] += 3;
      }, 500);
    };


    return {
      obj,
      objToRaw,
      objAddArr,
    };
  },
});
</script>

<style scoped>

</style>
